<template>
  <lay-container fluid="true" class="dict-box">
    <lay-card>
      <lay-form style="margin-top: 10px">
        <lay-row>
          <lay-col :md="5">
            <lay-form-item>
              <lay-input v-model="searchQueryPage.key" placeholder="键" size="sm" :allow-clear="true"></lay-input>
            </lay-form-item>
          </lay-col>
          <lay-col :md="5">
            <lay-form-item label=" " label-width="10">
              <lay-input v-model="searchQueryPage.desc" placeholder="描述" size="sm" :allow-clear="true" ></lay-input>
            </lay-form-item>
          </lay-col>
          <lay-col :md="5">
            <lay-form-item>
              <lay-button style="margin-left: 20px" type="normal" size="sm" @click="toSearch">
                查询
              </lay-button>
              <lay-button size="sm" @click="toReset"> 重置 </lay-button>
            </lay-form-item>
          </lay-col>
        </lay-row>
      </lay-form>
    </lay-card>
    <!-- table -->
    <div class="table-box">
      <lay-table id="key" :height="'100%'" :columns="columns" :loading="loading" children-column-name="children"
        @sortChange="sortChange"  @change="toSearch" :page="searchQueryPage"
          :data-source="dataSource" :default-toolbar="true" :default-expand-all="defaultExpandAll" :expand-index="1">
        <template v-slot:toolbar>
          <lay-button size="sm" type="primary" @click="changeVisibleDict('新增', null)"><lay-icon class="layui-icon-addition"></lay-icon> 新增</lay-button>
          <lay-button size="sm" @click="expandAll(true)">展开全部</lay-button>
          <lay-button size="sm" @click="expandAll(false)">折叠全部</lay-button>
        </template>
        <template #status="{ row }">
          <lay-switch :model-value="row.status == 1" @change="changeStatus($event, row)"></lay-switch>
        </template>
        <template #type="{ row }">
          <span v-if="row.type == 0"><lay-icon class="layui-icon-windows"></lay-icon> &nbsp;&nbsp; 系统</span>
          <span v-if="row.type == 1"><lay-icon class="layui-icon-usernamen"></lay-icon> &nbsp;&nbsp; 业务</span>
        </template>
        <template v-slot:operator="{ row }">
          <lay-button v-if="row.children" size="xs" @click="changeVisibleDictItem('添加', row)">添加</lay-button>
          <lay-button v-if="row.children" size="xs" border="green" @click="changeVisibleDict('编辑', row)">编辑</lay-button>
          <lay-popconfirm content="确定要删除?" @confirm="toOneRemove(row)" @cancel="cancel">
            <lay-button size="xs" border="red" border-style="dashed">删除</lay-button>
          </lay-popconfirm>
        </template>
      </lay-table>
    </div>

    <lay-layer v-model="visibleDict" :title="title" :area="['700px', '200px']">
      <div style="padding: 20px">
        <lay-form :model="formData" ref="formRef" required>
          <lay-col md="12">
            <lay-form-item label="键" prop="key">
              <lay-input v-model="formData.key"></lay-input>
            </lay-form-item>
            <lay-form-item label="描述" prop="desc">
              <lay-input v-model="formData.desc"></lay-input>
            </lay-form-item>
          </lay-col>
          <lay-col md="12">
            <lay-form-item label="类型" prop="sort">
              <lay-select v-model="formData.type" placeholder="请选择">
                <lay-select-option :value="0" label="系统"></lay-select-option>
                <lay-select-option :value="1" label="业务"></lay-select-option>
              </lay-select>
            </lay-form-item>
          </lay-col>
        </lay-form>
        <div style="width: 100%; text-align: center">
          <lay-button size="sm" type="primary" @click="toSubmit">保存</lay-button>
          <lay-button size="sm" @click="toCancel">取消</lay-button>
        </div>
      </div>
    </lay-layer>
    <lay-layer v-model="visibleDictItem" :title="title" :area="['700px', '200px']">
      <div style="padding: 20px">
        <lay-form :model="formItemData" ref="formRef" required>
          <lay-col md="12">
            <lay-form-item label="标签" prop="label">
              <lay-input v-model="formItemData.label"></lay-input>
            </lay-form-item>
            <lay-form-item label="值" prop="value">
              <lay-input v-model="formItemData.value"></lay-input>
            </lay-form-item>
          </lay-col>
        </lay-form>
        <div style="width: 100%; text-align: center">
          <lay-button size="sm" type="primary" @click="toItemSubmit">保存</lay-button>
          <lay-button size="sm" @click="toCancel">取消</lay-button>
        </div>
      </div>
    </lay-layer>
    
  </lay-container>
</template>

<script setup lang="ts">
  import { ref } from 'vue';
  import { layer } from '@layui/layui-vue';
  
  import { dictList, dictAdd, dictRemove, dictItemAdd, dictItemRemove } from '../../../api/module/system';
  
  // 其他
  // -- 加载中
  const loading = ref(false);
  const title = ref('新增');
  const defaultExpandAll = ref(false);
  // 角色
  // -- 是否可见
  const visibleDict = ref(false);
  const visibleDictItem = ref(false);
  // -- 查询
  const searchQueryPage = ref({ key: '', desc: '', total: 0, orderProperty: '', orderSort: 0 });
  // -- 选中的
  // const selectedKeys = ref();
  // -- 数据源
  const dataSource = ref([]);
  // -- 表结构
  const columns = ref([
    { title: "复选", type: "checkbox" },
    
    { title: '键', key: 'key' },
    { title: '描述', key: 'desc' },
    { title: '类型', key: 'type', customSlot: 'type' },
    { title: '标签', key: 'label' },
    { title: '值', key: 'value' },
    { title: '操作', width: '180px', customSlot: 'operator', key: 'operator', fixed: 'right' }
  ]);
  // 表单
  // -- 表单数据
  const formData = ref({ "key": "", "type": 0, "desc": "" });
  const formItemData = ref({ "dictId": 0, "label": "", "value": "" });
  // -- 表单标签
  const formRef = ref();
  
  // -- 方法函数
  // 加载默认数据
  function loadDataSource(){
    dictList(searchQueryPage.value).then(({ data, code, msg }) => {
      if (code == 200) {
        searchQueryPage.value.total = data.total;
        dataSource.value = data.list;
      }
      loading.value = false;
    })
  }
  // 刷新
  function toReset(){
    searchQueryPage.value.key = '';
    searchQueryPage.value.desc = '';
  }
  // 搜索
  function toSearch(){
    loadDataSource()
  }
  // 搜索 sort
  function sortChange(key : any, sort : number){
    searchQueryPage.value.orderProperty = key;
    searchQueryPage.value.orderSort = sort;
  }
  // 删除
  function toOneRemove(data: any){
    if(data.children){
      dictRemove({id: data.id}).then(({ code, msg }) => {
        if (code == 200) {
          layer.msg('成功删除！', { icon: 1, time: 1000 });
        } else {
          layer.msg(msg, { icon: 2, time: 1000 })
        }
        toSearch();
      })
    } else {
      dictItemRemove({id: data.id}).then(({ code, msg }) => {
        if (code == 200) {
          layer.msg('成功删除！', { icon: 1, time: 1000 });
        } else {
          layer.msg(msg, { icon: 2, time: 1000 })
        }
        toSearch();
      })
    }
  }
  // 提交
  function toSubmit(){
    dictAdd(formData.value).then(({ code, msg, message }) => {
      if (code == 200) {
        layer.msg('保存成功！', { icon: 1, time: 1000 });
      } else {
        layer.msg(message? message:msg, { icon: 2, time: 1000 })
      }
      toSearch();
      visibleDict.value = false
    });
  }
  function toItemSubmit(){
    dictItemAdd(formItemData.value).then(({ code, msg, message }) => {
      if (code == 200) {
        layer.msg('保存成功！', { icon: 1, time: 1000 });
      } else {
        layer.msg(message? message:msg, { icon: 2, time: 1000 })
      }
      toSearch();
      visibleDictItem.value = false
    });
  }
  // 
  function changeStatus(isChecked : boolean, row : any){
    row.status = isChecked? 1 : 0;
    formData.value = row;
    dictAdd(row).then(({code}) => {if(code == 200){layer.msg('修改成功');loadDataSource();}});
  }
  //
  function expandAll(flag : any) {
    defaultExpandAll.value = flag
  }
  // 
  function changeVisibleDict(text : any, row : any){
    title.value = text
    if (row != null) {
      let info = JSON.parse(JSON.stringify(row));
      formData.value = info;
    } else {
      formData.value = { key: '', desc: '', type: 0  };
    }
    visibleDict.value = !visibleDict.value
  }
  function changeVisibleDictItem(text : any, row : any){
    title.value = text;
    formItemData.value = { "dictId": row.id, "label": "", "value": "" };
    visibleDictItem.value = !visibleDictItem.value;
  }
  // 
  function toCancel(){
    visibleDict.value = false
    visibleDictItem.value = false
  }
  function cancel(){
    layer.msg('您已取消操作')
  }
  
  // --预执行
  loadDataSource();

</script>

<style scoped>
  .dict-box { 
    height: calc(100vh - 110px); 
    margin-top: 10px; box-sizing: border-box;
  } 
  
  .top-search { margin-top: 10px; padding: 10px; height: 40px; border-radius: 4px; background-color: #fff; } 
  
  .table-box { margin-top: 10px; padding: 10px; min-height: 650px; width: 100%; border-radius: 4px; box-sizing: border-box; background-color: #fff; } 
  
  .search-input { display: inline-block; width: 98%; margin-right: 10px; }
  
  .isChecked { display: inline-block; background-color: #e8f1ff; color: red; }
</style>